import { VFC, useRef, useState, useEffect } from 'react';
import { Modal } from 'antd';
import EditorView from './Editor';
import './index.less';

export default function Editor(props) {
	const {
		visible,
		onOk,
		onCancel,
	} = props;

	const editorRef = useRef(null);

	const handleOk = () => {
		const val = editorRef.current.getValue();
		onOk(val);
	}

	return <Modal
		title="组件样式编辑"
		centered
		visible={visible}
		onOk={handleOk}
		onCancel={onCancel}
		width={600}
		wrapClassName={'editor-modal'}
	>
		<EditorView ref={editorRef} />
	</Modal>;
}

